<html>

<head>
    <link href="__STATIC__/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
    <script src="__STATIC__/js/layer.js"></script>
    <link href="__STATIC__/icon/icon.css" rel="stylesheet">
    <link href="__STATIC__/css/list.css" rel="stylesheet"> <!-- 放在最后 -->
    <script src="__STATIC__/js/bootstrap.min.js"></script>
    <link href="__STATIC__/css/bootstrap-editable.css" rel="stylesheet">
    <script src="__STATIC__/js/bootstrap-editable.js" type="text/javascript"></script>
</head>

<body>
<style>
    .dialog-body {
        font-feature-settings: "lnum";
        -webkit-font-smoothing: antialiased;
        font-size: 12px;
        color: #666;
        font-family: "Microsoft YaHei", SimSun;
        margin: 0;
        padding: 0;
        line-height: 24px;
        background: 0 0;
    }

    .file-tree-container {
        height: 250px;
        margin: 10px 11px;
        border: 1px solid #f2f2f2;
        overflow: auto;
    }

    .treeview {
        margin: 0;
        padding: 0;
        list-style: none;
        visibility: visible;
    }

    .treeview-node-on {
        border: 1px solid #fff;
        border-width: 1px 0;
        color: #2974B6;
        cursor: pointer;
        display: block;
        white-space: nowrap;
        text-decoration: none;
        background: #e5f0fb !important;
        border-color: #BBD4EF #fff !important;
        padding-left: 0px;
    }

    .treeview-node-handler {
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
        display: block;
        white-space: nowrap;
        text-decoration: none;
        padding: 4px 0;
        color: #333;
    }

    .icon-operate {
        white-space: nowrap;
        color: #333;
        background: url(__STATIC__/image/icon-tree_77d7929.png) 0 0 no-repeat;
        display: inline-block;
        zoom: 1;
        vertical-align: middle;
        margin: 0 3px;
        width: 15px;
        height: 15px;
        cursor: pointer;
        background-position: -999px -999px;
    }

    .treeview-node .close2 {
        background-position: -30px 0;
    }

    .treeview-node .open {
        background-position: -30px -22px;
    }

    .treeview-dir {
        cursor: pointer;
        white-space: nowrap;
        color: #333;
        margin-right: 5px;
        height: 18px;
        width: 22px;
        background: url(__STATIC__/image/icon-tree_77d7929.png) 0 0 no-repeat;
        background-position: 0 -22px;
        display: inline-block;
        zoom: 1;
        vertical-align: middle;
    }

    .treeview-node:hover {
        background: #f4f9fd;
        border-color: #e5f0fb;
    }


    .top,
    .text {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .space-between {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .align-center,
    .flex-box,
    .space-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .flex-box {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .editable-button {
        margin: 10px 2px 8px 5px;
    }

    .editable-input input {
        width: 200px !important;
    }
</style>
<div class="dialog-body">
    <div class="file-tree-container">
        <ul class="treeview ">
            <li>
                <div class="treeview-node treeview-node-on _minus" data-padding-left="0" style="padding-left:0px"
                     id="0" data-isGet="0">
                        <span class="treeview-node-handler">
                            <em class="icon-operate open"></em><dfn class="treeview-dir"></dfn>
                            <span class="treeview-txt">根目录</span>
                        </span>
                </div>
                <ul class="treeview treeview-root-content" data-padding-left="15">
                </ul>
            </li>
        </ul>
    </div>
</div>


<div id="mkdir2">
    <li id="mkdir" style="display: none;">
        <div class="treeview-node" no="1" data-padding-left="15" style="padding-left:15px">
                <span class="treeview-node-handler">
                    <em class="b-in-blk plus icon-operate"></em><dfn
                        class="b-in-blk treeview-ic treeview-dir"></dfn><span class="treeview-txt"
                                                                              id="mkdir_input"></span>
                </span>
        </div>
        <ul class="treeview  treeview-collapse" data-padding-left="30"></ul>
    </li>
</div>


<div id="DirMb" style="display: none;">
    <li>
        <div class="treeview-node" data-padding-left="15" style="padding-left:15px" id="" data-isGet="0">
                <span class="treeview-node-handler">
                    <em class="icon-operate"></em><dfn class="treeview-dir"></dfn><span class="treeview-txt"></span>
                </span>
        </div>
        <ul class="treeview  treeview-collapse" data-padding-left="30"></ul>
    </li>
</div>

<div class="top space-between">
    <div class="top-left align-center">
        <div class="top-item flex-box" onclick="mkdir_open()" style="margin-left: 10px;">
            <em class="icon icon-newfolder" title="新建文件夹"></em>
            <p class="text">新建文件夹</p>
        </div>
    </div>
    <div style="float:left">
        <div class="top-item flex-box upload" onclick="ok()" style="width: 120px;float:left">
            <p class="text" style="margin-left:0">确定</p>
        </div>
        <div class="top-item flex-box" onclick="no()" style="width: 120px;">
            <p class="text" style="margin-left:0">取消</p>
        </div>
    </div>
</div>

<script>

    var mkdir_html = $("#mkdir2").html();
    mkdirInputSet($(".treeview-node-on").parent().find('ul:first'));    //设置初始位置在根目录下
    getFolderData("0");  //获取根目录下的文件夹


    //设置新建文件夹的位置
    function mkdirInputSet(ulObj) {
        var ulLeft = ulObj.attr("data-padding-left");

        $("#mkdir").remove();
        ulObj.append(mkdir_html);//添加
        $("#mkdir div").css("padding-left", ulLeft + "px");
        $("#mkdir div").attr("data-padding-left", ulLeft);
        $("#mkdir ul").attr("data-padding-left", Number(ulLeft) + 15);

        mkdir_editable();//设置行内编辑
    }

    //获取文件夹下的文件夹
    function getFolderData(id) {
        var obj = $("#" + id);
        if (obj.attr("data-isGet") == "1")  //防止重复获取
            return;
        obj.attr("data-isGet", "1");

        var objUl = obj.parent().find('ul:first');
        var Left = Number(objUl.attr("data-padding-left"));


        $.ajax({
            type: "post",
            url: "/file/folder_list",
            dataType: 'json',
            data: {
                "folder_id": id,
            },
            success: function (data) {
                if (data.status) {
                    data = data.data;
                    for (var i = 0; i < data.length; i++) {
                        data2 = data[i];
                        objUl.append(setDirMB(data2['id'], data2['folder_name'], Left, data2['down']));
                    }
                    setClick(); //动态修改html后需要重新绑定事件

                } else {
                    layer.alert(data.msg, { icon: 2 });
                }
            },
            error: function (error) {
                layer.alert("API请求失败，请联系客服", { icon: 2 });
            }
        });
    }

    //设置文件模板
    function setDirMB(id, name, Left, isParent = 0, isXuanzhong = 0) //ID 名称 左偏移长度 是否有下级文件 是否选中
    {

        $("#DirMb li div span span").html(name);              //设置文件名
        $("#DirMb li div").attr("id", id);
        $("#DirMb li div").attr("data-padding-left", Left);
        $("#DirMb li div").css("padding-left", Left + "px");
        $("#DirMb li ul").attr("data-padding-left", Left + 15);
        if (isParent) {
            $("#DirMb li div span em").addClass("close2");    //展开图标
        }
        if (isXuanzhong) {
            $("#DirMb li div").addClass("treeview-node-on");
        }

        html = $("#DirMb").html();

        //样式删除掉
        if (isParent) {
            $("#DirMb li div span em").removeClass("close2");
        }
        if (isXuanzhong) {
            $("#DirMb li div").removeClass("treeview-node-on");    //选中
        }


        return html;
    }

    //设置选中列事件
    function setClick() {

        //选中列
        $(".treeview-node").unbind("click").click(function (e) {      //解绑再绑定
            var id = $(this).attr("id");
            var ulObj = $(this).parent().find('ul:first');

            if ($(this).attr("no") != "1") {  //不是编辑框自身的点击
                mkdirInputSet(ulObj);   //设置新建文件夹的位置
            } else {
                return;
            }

            if ($(this).hasClass("treeview-node-on")) { //是否已经选中过了
                var objEm = $(this).find("em");
                if (objEm.hasClass("open")) {   //是否展开
                    objEm.removeClass("open");
                    objEm.addClass("close2");
                    ulObj.hide('fast');

                } else if (objEm.hasClass("close2")) { //否则显示
                    objEm.removeClass("close2");
                    objEm.addClass("open");
                    ulObj.show('fast');

                    getFolderData(id);
                }
            } else {

                $(".treeview-node-on").removeClass("treeview-node-on"); //删除原来的选中
                $(this).addClass("treeview-node-on");   //自身增加选中
            }
        });
    }

    //设置行内编辑
    function mkdir_editable() {
        $("#mkdir_input").editable({
            toggle: 'manual',
            mode: "inline",
            validate: function (v) {
                if (!v) return '文件夹名不能为空';

                $.ajax({
                    type: "post",
                    url: "/file/mkdir",
                    dataType: 'json',
                    data: {
                        "folder_id": $(".treeview-node-on").attr("id"),
                        "folder_name": v,
                        "folder_miaoshu": "",
                    },
                    success: function (data) {
                        if (data.status) {
                            var obj = $(".treeview-node-on").parent().find('ul:first');
                            var Left = Number(obj.attr("data-padding-left"));

                            $(".treeview-node-on").find("em").addClass("open");
                            $(".treeview-node-on").removeClass("treeview-node-on");

                            obj.append(setDirMB(data.data, v, Left, 0, 1));

                            //选中的位置修改了 要重新获取一下
                            obj = $(".treeview-node-on").parent().find('ul:first');

                            mkdirInputSet(obj); //重新修改编辑框的位置
                            setClick();      //动态修改html后需要重新绑定事件

                            layer.msg(data.msg, { time: 1000, icon: 1, shift: 4 });
                        } else {
                            layer.alert(data.msg, { icon: 2 });
                        }
                    },
                    error: function (error) {
                        layer.alert("API请求失败，请联系客服", { icon: 2 });
                    }
                });
            }
        });
    }

    //循环判断输入框是不是消失了
    function mkdir_ifColse() {
        setTimeout(
            function () {
                var html = $(".editable-input").html();
                //console.log(html);
                if (!html) {
                    $("#mkdir").hide();
                    $("#mkdir").hide();
                    return;
                }

                mkdir_ifColse();
            }
            , 50);
    }

    //新建文件夹按钮
    function mkdir_open() {
        $("#mkdir").show();
        setTimeout(function () {
            $("#mkdir_input").editable('toggle');

            $('.file-tree-container').scrollTop($('.file-tree-container')[0].scrollHeight); //设置滚动条
            //$(".editable-cancel").attr("onclick","mkdir_colse()");


        }, 1);  //神奇的BUG 必须得要延迟
        mkdir_ifColse();

        var obj = $(".treeview-node-on");
        var objEm = obj.find("em");
        var objUl = obj.parent().find('ul:first');
        if (objEm.hasClass("close2")) { //帮你展开
            objEm.removeClass("close2");
            objEm.addClass("open");
            objUl.show('fast');
        }
    }


    //确定按钮
    function ok() {

        $.ajax({
            type: "post",
            url: "/file/move_to_file",
            dataType: 'json',
            data: {
                "folder_id": $(".treeview-node-on").attr("id"),
                "ids": "{$ids}",
                "idFs": "{$idFs}",
            },
            success: function (data) {
                if (data.status) {
                    layer.msg(data.msg, { time: 1000, icon: 1, shift: 4 });
                    setTimeout(function () {
                        window.parent.getTable("当前文件夹");
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }, 1000);
                } else {
                    layer.alert(data.msg, { icon: 2 });
                }
            },
            error: function (error) {
                layer.alert("API请求失败，请联系客服", { icon: 2 });
            }
        });
    }

    //取消按钮
    function no() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>

</html>